<!DOCTYPE html>
<html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
 See LICENSE in the project root for license information -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Rubric Grader</title>
  <link href="//appsforoffice.microsoft.com/fabric/2.0/fabric.min.css" rel="stylesheet">
  <link href="//appsforoffice.microsoft.com/fabric/2.0/fabric.components.min.css" rel="stylesheet">
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

  <link href="../app.css" rel="stylesheet" type="text/css" />
  <script src="../app.js"></script>

  <script src="grader.js"></script>
</head>
<body class="ms-font-m">
    <div class="home flex-container">
        <div class="ms-Grid" id="header">
            <div class="ms-Grid-row ms-bgColor-themeDarker">
                <div class="ms-Grid-col padding-header">
                    <span class="ms-font-xl ms-fontColor-themeLighter ms-fontWeight-semibold">Rubric Grader</span>
                </div>
            </div>
        </div>
        <div class="ms-Grid padding-body">
            <div class="ms-Grid-row padding-top">
                <div class="ms-Grid-col">
                    <button class="ms-Button ms-Button" id="getStats">
                        <span class="ms-Button-icon"><i class="ms-Icon"></i></span>
                        <span class="ms-Button-label">Get count</span>
                        <span class="ms-Button-description">Gets the sentence and word count.</span>
                    </button>
                </div>
                <div class="ms-Grid-col ms-font-s">
                    <div id="wordCount">Words:</div>
                    <br />
                    <div id="sentenceCount">Sentences:</div>
                </div>
            </div>
            <div class="ms-Grid-row padding-top">
                <div class="ms-Grid-col">
                    <label class="ms-Label">Content</label>
                    <select class="ms-Dropdown-select" id="content">
                        <option value="5">Loading...</option>
                    </select>
                </div>
                <div class="ms-Grid-col">
                    <label class="ms-Label">Organization</label>
                    <select class="ms-Dropdown-select" id="organization">
                        <option value="5">Loading...</option>
                    </select>
                </div>
            </div>
            <div class="ms-Grid-row">
                <div class="ms-Grid-col">
                    <label class="ms-Label">Style</label>
                    <select class="ms-Dropdown-select" id="style">
                        <option value="5">Loading...</option>
                    </select>
                </div>
                <div class="ms-Grid-col">
                    <label class="ms-Label">Grammar</label>
                    <select class="ms-Dropdown-select" id="grammar">
                        <option value="5">Loading...</option>
                    </select>
                </div>
            </div>
            <div class="ms-Grid-row padding-top">
                <div class="ms-Grid-col">
                    <label class="ms-Label">Comments</label>
                    <div class="ms-TextField">
                        <textarea id="commentBox" rows="5"></textarea>
                    </div>
                </div>
            </div>
            <div class="ms-Grid-row">
                <div class="ms-Grid-col">
                    <button class="ms-Button ms-Button--primary" id="addGrade">
                        <span class="ms-Button-icon"><i class="ms-Icon"></i></span>
                        <span class="ms-Button-label">Grade it</span>
                        <span class="ms-Button-description">Calculates the grade and adds it to the target page.</span>
                    </button>
                </div>
                <div class="ms-Grid-col">
                    <button class="ms-Button ms-Button" id="clear">
                        <span class="ms-Button-icon"><i class="ms-Icon"></i></span>
                        <span class="ms-Button-label">Clear</span>
                        <span class="ms-Button-description">Resets the scores and clears any comments.</span>
                    </button>
                </div>
            </div>
            <div class="ms-Grid-row padding-top">
                <div class="ms-Grid-col">
                    <label class="ms-Label">Choose a page to open</label>
                    <select class="ms-Dropdown-select" id="page-picker"></select>
                </div>
            </div>
            <div class="ms-Grid-row">                    
                <div class="ms-Grid-col">
                    <button class="ms-Button ms-Button" id="openPage">
                        <span class="ms-Button-icon "><i class="ms-Icon"></i></span>
                        <span class="ms-Button-label">Open page</span>
                        <span class="ms-Button-description">Opens the selected page.</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
